<template>
  <view class="template-integral tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>

    <view class="integral-wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}" style="background: linear-gradient(180deg, #FEF5E4, #F9FFF9);">
      <view class="adver-wrap tn-margin">
        <view class="tn-text-center" style="color: #E72F8C;padding: 30rpx 0;">
          <image class="logo-img" :src="userInfo.boundAvatar" mode=""></image>
        </view>
        <view class="tn-text-center tn-color-gray">
          {{userInfo.boundNickname}}
        </view>
		
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center tn-padding-top">
          国历：{{userInfo.boundBirthday}}
        </view>
		<view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center tn-padding-bottom-xl">
		  农历：{{userInfo.boundBirthday}}
		</view>
      </view>

    </view>

    <view class="tn-margin-top-lg tn-margin-bottom">
      <view class="tn-flex tn-flex-row-between tn-strip-bottom-min tn-padding" v-for="(item,index) in integral" :key="index">
        <view class="justify-content-item">
          <view class="tn-color-gray--dark tn-text-lg">
            {{item.desc}}
          </view>
          <view class="tn-color-gray tn-padding-top-xs">
            {{item.date}}
          </view>
        </view>
        <view class="justify-content-item tn-text-xl tn-padding-top">
          <view :class="'tn-color-' + (item.integral > 0 ? 'blue--dark' : 'purplered')"> {{item.integral>0?"+":""}} {{item.integral}}</view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
  name: 'TemplateIntegral',
  mixins: [template_page_mixin],
  data () {
    return {
      userInfo: {},
    }
  },
  async created () {
    this.userInfo = await this.$getStorage('userInfo')
  },
  methods: {
    async checkIn () {
      if (this.checked) return this.$showMessage('error', '今日已签到了');
      // 将当天修改为已签到
      this.checked = true
      const data = {
        userId: this.userInfo._id,
        integral: 10,
        date: this.getCurrentDateTimeString(),
        desc: '每日签到'
      }
      this.userInfo.score = this.userInfo.score + 10
      await this.$post("update", 'users', this.userInfo)
      this.$setStorage('userInfo', this.userInfo)
      const { result } = await this.$post("add", 'integral', data)
      this.integral.push(data)
      // 更新用户的积分
      this.$showMessage('success', '签到成功');
    },
    getCurrentDateTimeString () {
      const currentDate = new Date();

      const year = currentDate.getFullYear();
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
      const day = currentDate.getDate().toString().padStart(2, '0');

      const hours = currentDate.getHours().toString().padStart(2, '0');
      const minutes = currentDate.getMinutes().toString().padStart(2, '0');
      const seconds = currentDate.getSeconds().toString().padStart(2, '0');

      const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDateTime;
    },
    isTodayChecked () {
      const currentDateTime = this.getCurrentDateTimeString()
      const today = currentDateTime.split(' ')[0]
      const checked = this.integral.filter(item => item.date.split(' ')[0] === today)
      return checked.length > 0 ? true : false

    },
    // 获取积分数据
    async getList () {
      const { data } = await this.$post("get", 'integral',
        {
          condition: { userId: this.userInfo._id },
          orderByField: 'createTime',
          orderByDirection: 'desc',
          limit: 20
        })
      this.integral = data
      // 判断今天是不是已经签到了
      this.checked = this.isTodayChecked()
    },

  }
}
</script>

<style lang="scss" scoped>
/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #ffffff;
  }
}

/* 顶部背景图 start */
.top-backgroup {
  height: 450rpx;
  z-index: -1;

  .backgroud-image {
    width: 100%;
    height: 450rpx;
    // z-index: -1;
  }
}
/* 顶部背景图 end */

/* 页面 start*/
.integral-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 阴影 start*/
.tn-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.integral-wrap {
  position: relative;
  z-index: 1;
}
/* 页面 end*/

/* 翘边阴影*/
.shadow-warp {
  position: relative;
  box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.01);
}

.shadow-warp:before,
.shadow-warp:after {
  position: absolute;
  content: "";
  top: 20rpx;
  bottom: 30rpx;
  left: 20rpx;
  width: 50%;
  box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);
  z-index: -1;
}

.shadow-warp:after {
  right: 20rpx;
  left: auto;
  transform: rotate(3deg);
}

/* 间隔线 start*/
.tn-strip-bottom-min {
  width: 100%;
  border-bottom: 1rpx solid #f8f9fb;
}

.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/
.logo-img{
	width: 110rpx;
	height: 110rpx;
	border-radius: 50%;
	border: 3px solid #ffffff;
}
</style>
